<template>
    <main-layout>
        <!-- 顶部内容 -->
        <van-nav-bar
            title="我的预约"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />

        <!-- 预约项目信息 -->
        <van-swipe-cell v-for="item in objectArr" :key="item.proid">
            <van-card
                :num="num"
                :desc="item.makedate"
                :title="item.proname"
                class="goods-card"
                :thumb="item.path"
            />
            <template #right>
                <van-button square text="删除" @click="delEvt(item)" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>
    </main-layout>
</template>

<script>
    export default {
        data() {
            return {
                //预约项目
                objectArr:[],
                num:1
            }
        },

        created() {
            this.objectArr=this.$store.getters['common/getProjectInfo']
        },

        methods: {
            //返回上一级
            onClickLeft(){
                this.$router.go(-1)
            },

            //删除预约项事件
            delEvt(item){
                let delPro=this.$store.getters['common/getProjectInfo']
                delPro.map((it,i)=>{
                    if(it===item){
                        delPro.splice(i,1)
                    }
                })
                this.$store.commit('common/setProjectInfo',delPro)
            }
        },
    }
</script>

<style lang="less" scoped>
    //预约项目信息
    .goods-card {
        margin: 5px 0;
        background-color: #fff;
    };

    .delete-button {
        height: 100%;
    }
</style>